<template>
	<div class="j-news">
		<div class="container">
			<div class="module-title text-center" v-show="isModule">
				<span class="title-ch">新闻中心</span><br>
				<span class="title-en">NEWS REPORT</span>
			</div>
			<div class="news-box">
				<ul class="news-list">
					<li v-for="(item,index) in newsList" :key="index">
						<div class="news-img">
							<router-link :to="'/news/newsdetail?id='+item.id" target="_blank">
								<!--<img src="../../assets/news/news1.png">-->
								<img :src="srcimg">
							</router-link>
						</div>
						<router-link :to="'/news/newsdetail?id='+item.id" target="_blank" class="news-info">
							<div class="news-title">
								<router-link :to="'/news/newsdetail?id='+item.id" target="_blank">{{item.title}}</router-link>
								<div class="news-title-right">
									<span class="icon-left">
										<i class="icon icon-time"></i>
										<span>{{item.createdate}}</span>
									</span>
									<span>
										<i class="icon icon-eye-open"></i>
										<span>{{item.num}}</span>
									</span>
								</div>
							</div>
							<!--<div class="news-text">{{item.content}}</div>-->
							<div class="news-text" v-html="item.description"></div>
						</router-link>
					</li>
				</ul>
				<router-link to="/news/newslist?flag=1" class="look-more" v-if="isShowMore">查看更多</router-link>
				<span class="look-more" @click="findLookMore()" v-else>查看更多</span>
			</div>
		</div>
	</div>
</template>
<script>
import api from '../../service/api'
export default {
  data () {
    return {
      nTitle: '',
      nTime: '',
      newsNum: '',
      nText: '',
      newsList: '',
      isModule: true,
      isShowMore: true,
      srcimg: require('../../assets/news/news1.png'),
      iconList: [
        {id: 0, src: require('../../assets/icon/index01.png'), name: '脐带血库', link: '##'},
        {id: 1, src: require('../../assets/icon/index02.png'), name: '附属医院', link: '##'},
        {id: 2, src: require('../../assets/icon/index03.png'), name: '生命种子', link: '##'},
        {id: 3, src: require('../../assets/icon/index04.png'), name: '存储方式', link: '##'},
        {id: 4, src: require('../../assets/icon/index05.png'), name: 'HLA在线配型', link: '##'},
        {id: 5, src: require('../../assets/icon/index06.png'), name: '在线培训', link: '##'}
      ]
    }
  },
  props: {
    flagNum: {
      type: String
    }
  },
  methods: {
	  findAllNews () {
      api.findAllNews()
        .then(res => {
          if (res.code === 200) {
	          this.newsList = res.result
	          for (const i in res.result) {
              this.newsList[i].createdate = this.newsList[i].createdate.split(' ')[0]
              this.newsList[i].content = this.newsList[i].content.split('</p>')[0].split('<p>')[1] + '...'
            }
          } else {
            console.log(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    findNewsByFlag (flag) {
      api.findNewsByFlag(flag)
        .then(res => {
          if (res.code === 200) {
            // this.newsList = res.result
            // for (const i in res.result){
	          // this.newsList[i].createdate = this.newsList[i].createdate.split(' ')[0]
	          // this.newsList[i].content = this.newsList[i].content.split('</p>')[0].split('<p>')[1] + '...'
            // }
	          let newlist2 = []
            for (const i in res.result){
              if (i === '3') {
                return
              } else {
                newlist2[i] = res.result[i]
                this.newsList = newlist2
                this.newsList[i].createdate = this.newsList[i].createdate.split(' ')[0]
                this.newsList[i].content = this.newsList[i].content.split('</p>')[0].split('<p>')[1] + '...'
                this.newsList[i].description = this.newsList[i].description + '...'
              }
            }
          } else {
            console.log(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    findNewsByFlagAll (flag) {
      api.findNewsByFlag(flag)
        .then(res => {
          if (res.code === 200) {
            this.newsList = res.result
            for (const i in res.result){
              this.newsList[i].createdate = this.newsList[i].createdate.split(' ')[0]
              this.newsList[i].content = this.newsList[i].content.split('</p>')[0].split('<p>')[1] + '...'
            }
          } else {
            console.log(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    findLookMore () {
      this.findNewsByFlagAll(this.flagNum)
    }
  },
  created () {
	  if (this.flagNum) {
      this.isModule = false
      this.isShowMore = false
      this.findNewsByFlag(this.flagNum)
	  } else {
      this.isModule = true
      this.isShowMore = true
      this.findNewsByFlag(1)
	  }
    console.log(this.$route.query.flag)
    if (this.$route.query.flag === '2') {
      this.srcimg = require('../../assets/news/news01.png')
    } else {
      this.srcimg = require('../../assets/news/news1.png')
    }
  },
  watch: {
    flagNum: function () {
      this.findNewsByFlag(this.flagNum)
	    this.isModule = false
	    this.isShowMore = false
      if (this.flagNum === '2') {
        this.srcimg = require('../../assets/news/news01.png')
      } else {
        this.srcimg = require('../../assets/news/news1.png')
      }
    }
  }
}
</script>
<style rel="stylesheet/scss" type="text/scss" lang="scss" scoped>
	/*@import "../../styles/common.css";*/
	.j-news{
		background: #f8f8f8;
		.about-icon{
			margin: 70px 0;
			li{
				float: left;
				width: 16.666666%;
				padding: 0 15px;
				margin-bottom: 20px;
				a{
					div{
						img{
							max-width: 100%;
							vertical-align: middle;
							margin: 0 auto;
						}
					}
					.about-txt{
						margin-top: 5px;
						font-size: 16px;
						color: #555;
					}
				}
			}
		}
		.news-box{
			.news-list{
				margin-bottom: 10px;
				padding: 0 15px;
				li{
					width: 100%;
					position: relative;
					padding-left: 180px;
					min-height: 98px;
					margin-bottom: 50px;
					.news-img{
						position: absolute;
						left: 0;
						top: 0;
						a{
							color: #333;
							text-decoration: none;
							img{
								width: 165px;
								height: 98px;
								border-radius: 4px;
							}
						}
					}
					.news-info{
						/*width: 84.5%;!*写给不支持calc()的浏览器*!*/
						/*width:-moz-calc(100% - 180px);*/
						/*width:-webkit-calc(100% - 180px);*/
						/*width: calc(100% - 180px);*/
						.news-title{
							position: relative;
							padding-right: 165px;
							border-bottom: solid 1px #dfdede;
							padding-bottom: 10px;
							text-align: left;
							a{
								font-size: 16px;
								font-weight: 600;
								color: #010101;
							}
							.news-title-right{
								position: absolute;
								right: 0;
								top: 0;
								color: #333;
								font-size: 14px;
								span{
									vertical-align: top;
								}
								.icon-left{
									margin-right: 20px;
								}
							}
						}
						.news-text {
							color: #333;
							font-size: 14px;
							margin-top: 8px;
							padding-right: 20px;
							text-align: left;
						}
					}
				}
			}
			.icon-time {
				display: inline-block;
				width: 15px;
				height: 19px;
				padding-top: 2px;
				background: url("../../assets/time.png") no-repeat;
				background-position-y: 2px;
			}
			.icon-eye-open{
				vertical-align: top;
				display: inline-block;
				width: 15px;
				height: 19px;
				padding-top: 2px;
				background: url("../../assets/eye.png") no-repeat;
				background-position-y: 2px;
			}
			.look-more{
				display: block;
				width: 150px;
				height: 45px;
				text-align: center;
				line-height: 45px;
				margin: 0 auto 50px auto;
				font-size: 14px;
				font-weight: bold;
				letter-spacing: 1px;
				/*color: #333;*/
				color: #ffffff;
				cursor: pointer;
				/*background: url(../../assets/news/js-more.png) center no-repeat;*/
				background-color: #00a8dd;
			}
		}
	}
	@media (max-width: 767px){
		.about-icon{
			margin: 30px 0!important;
			li{
				width: 33.333333%!important;
				margin-bottom: 10px;
				.about-txt{
					font-size: 13px!important;
				}
			}
		}
		.news-back{
			margin: 20px auto!important;
		}
		.news-box{
			.news-list{
				li{
					padding-left: 0!important;
					margin-bottom: 25px!important;
					.news-img{
						width: 100%;
					}
					.news-info{
						width: 100%;
						/*margin-top: 100px;*/
						.news-title{
							padding-right: 0!important;
							overflow: hidden;
							text-overflow: ellipsis;
							/*white-space: nowrap;*/
							a{
								display:block;/*内联对象需加*/
								width:12em;
								word-break:keep-all;/* 不换行 */
								white-space:nowrap;/* 不换行 */
								overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
								text-overflow:ellipsis;
								float: left;
							}
						}
					}
				}
				.icon-left{
					margin-right: 10px!important;
				}
			}
			.news-img{
				display: none;
			}
		}
		.look-more{
			margin: 0 auto 40px auto!important;
		}
	}
</style>
